<template>
  <div>
    <!-- 约课确认页 -->
    <!-- 顶部导航栏 -->
    <div class="tag">
      <van-nav-bar fixed placeholder title="约课确定页" left-text="" right-text="" left-arrow @click-left="onClickLeft" />
    </div>
    <!-- 导航栏下面 -->
    <div class="tag1">
      <p>预约信息</p>
      <van-divider />
    </div>
    <!-- 预约信息 --------------------------------------------------->
    <div class="about">
      <div class="about_1">
        <div class="about_2">
          <van-cell-group>
            <van-field colon v label="课程" label-width="8.2em" placeholder="请输入课程名" />
          </van-cell-group>
        </div>
        <!-- 日期 -->
        <div class="about_2">
          <van-field readonly colon clickable name="calendar" label-width="8.2em" :value="value1" label="日期" placeholder="点击选择日期" @click="showCalendar = true" />
          <van-calendar v-model="showCalendar" @confirm="onConfirm" />
        </div>
        <!-- 时间 -->
        <div class="about_2">
          <van-field readonly colon clickable name="datetimePicker" label-width="8.2em" :value="value2" label="时间选择" placeholder="点击选择时间" @click="showPicker = true" />
          <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker type="time" @confirm="onConfirm2" @cancel="showPicker = false" />
          </van-popup>
        </div>
        <!-- 场馆 -->
        <div class="about_2">
          <van-field readonly colon clickable name="picker" label-width="8.2em" :value="value3" label="场馆" placeholder="点击选择场馆" @click="showPicker2 = true" />
          <van-popup v-model="showPicker2" position="bottom">
            <van-picker show-toolbar :columns="columns" @confirm="onConfirm3" @cancel="showPicker = false" />
          </van-popup>
        </div>
        <!-- 场地 -->
        <div class="about_2">
          <van-field readonly colon clickable name="picker" label-width="8.2em" :value="value4" label="场地" placeholder="点击选择场地" @click="showPicker3 = true" />
          <van-popup v-model="showPicker3" position="bottom">
            <van-picker show-toolbar :columns="columns1" @confirm="onConfirm4" @cancel="showPicker3 = false" />
          </van-popup>
        </div>
        <!-- 成团人数 -->
        <div class="about_2">
          <van-field readonly colon clickable name="picker" label-width="8.2em" :value="value5" label="成团人数" placeholder="点击选择人数" @click="showPicker4 = true" />
          <van-popup v-model="showPicker4" position="bottom">
            <van-picker show-toolbar :columns="columns2" @confirm="onConfirm5" @cancel="showPicker4 = false" />
          </van-popup>
        </div>
        <!-- 教练 -->
        <div class="about_2">
          <van-field readonly colon clickable name="picker" label-width="8.2em" :value="value6" label="教练" placeholder="点击选择教练" @click="showPicker5 = true" />
          <van-popup v-model="showPicker5" position="bottom">
            <van-picker show-toolbar :columns="columns3" @confirm="onConfirm6" @cancel="showPicker5 = false" />
          </van-popup>
        </div>
        <div class="hour">
          <van-radio-group v-model="hour" direction="horizontal">
            <div class="hour_1">
              <span>课时:</span>
            </div>
            <van-radio name="1" icon-size="17px">1课时</van-radio>
            <van-radio name="2" icon-size="17px">4课时</van-radio>
            <van-radio name="3" icon-size="17px">6课时</van-radio>
          </van-radio-group>
          <!--  -->
        </div>
      </div>
    </div>
    <!-- 备注框设置 -->
    <div class="remark">
      <van-field left-icon="like-o" label="留言" rows="2" autosize type="textarea" placeholder="填写预约备注,该信息会被教练看到" show-word-limit />
    </div>
    <!-- 灰色线 -->
    <h1 class="kong">&nbsp;</h1>
    <!-- 倒计时 -->
    <div class="count">
      <p>活动倒计时:</p>
      <van-count-down title="活动倒计时" :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
    </div>

    <!-- 下半部分 ----------------------------------------->
    <div class="tag1">
      <p>选择支付方式</p>
      <van-divider />
    </div>
    <!-- 支付方式 -->
    <div class="pay">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title="微信支付" style="padding: 7px" clickable @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="会员支付" style="padding: 7px" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <!-- 灰色线 -->
    <h1 class="kong">&nbsp;</h1>
    <!-- 温馨提示 -->
    <div class="tag1">
      <p>温馨提示</p>
      <van-divider />
    </div>
    <div class="tag2">
      <ul style="color: gray">
        <li>1.预约成后自动扣除响应的费用</li>
        <li>2.取消预约不扣除费用</li>
        <li>3.开课前2小时不可取预约</li>
        <li>4.预约人数不足2人则自动取消该节课程,预约金额将退回</li>
      </ul>
    </div>
    <!-- 底部导航栏------------------------------------------------>
    <van-tabbar fixed>
      <van-tabbar-item icon="phone-o">联系教练</van-tabbar-item>
      <van-button type="info" style="width: 200px" @click="popup">提交预约并支付</van-button>
    </van-tabbar>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      // 预约信息选择器
      value: '',
      value1: '',
      value2: '',
      showPicker: false,
      showCalendar: false,
      value3: '',
      columns: ['健身馆', '瑜伽馆', '搏击馆'],
      showPicker2: false,
      value4: '',
      columns1: ['体能测试区', '力量训练区', '有氧训练区', '私客授课区', '综合训练区'],
      showPicker3: false,
      value5: '',
      columns2: ['1人', '2人', '3人'],
      showPicker4: false,
      value6: '',
      columns3: ['彭于晏', '易烊千玺', '李钟硕', '刘畊宏'],
      showPicker5: false,
      // stepper: '1',
      radio: '',
      activeNames: ['1'],
      checkbox: false,
      checked: true,
      hour: '',
      time: 30 * 60 * 60 * 1000,
      millisecond: true
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onConfirm(date) {
      this.value1 = `${date.getMonth() + 1}/${date.getDate()}`
      this.showCalendar = false
    },
    onConfirm2(time) {
      this.value2 = time
      this.showPicker = false
    },
    onConfirm3(value) {
      this.value3 = value
      this.showPicker2 = false
    },
    onConfirm4(value) {
      this.value4 = value
      this.showPicker3 = false
    },
    onConfirm5(value) {
      this.value5 = value
      this.showPicker4 = false
    },
    onConfirm6(value) {
      this.value6 = value
      this.showPicker5 = false
    },
    // 立即预约弹出窗的设置
    popup() {
      Dialog.confirm({
        message: '确认要预约该课程?'
      })
        .then(() => {
          // on confirm
          // 跳转到预约成功页面
          this.$router.push('./succeed')
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
/* 约课信息样式 */
.tag1 > p {
  margin: 10px 0px 15px 15px;
  border-left: 2px solid #3478f7;
  /* font-weight: bold; */
  padding-left: 4px;
}
/* 预约信息 */
.about {
  margin: 10px 0 5px 75px;
}
/* 给所有选择器的样式--------------------------------- */
.about_2 {
  margin: 7px;
  height: 30px;
}
.people {
  display: flex;
  float: right;
}
/* 备注框的样式 */
.remark {
  margin: 10px auto;
  width: 330px;
  /* height: 50px; */
  border: 1px solid gray;
  border-radius: 7px;
}
/*  */
.kong {
  background-color: #eee;
  border: 2px solid #eee;
  line-height: 5px;
  margin-bottom: 10px;
}
.img-icon {
  height: 20px;
}
.tag2 {
  margin-left: 30px;
}
.pay {
  margin-left: 20px;
  /* padding-bottom: 10px; */
  width: 340px;
}
.hour_1 {
  width: 3.2em;
  margin-left: 5px;
  color: #646566;
  text-align: left;
  word-wrap: break-word;
}
/* 倒计时样式 */
.count {
  display: flex;
  margin: 20px;
}
.count > p {
  width: 100px;
  height: 20px;
  font-weight: bold;
  margin: auto;
  color: dimgrey;
}
.van-count-down {
  width: 150px;
  height: 20px;
  font-weight: bold;
  margin: 0px auto;
  color: rgb(247, 71, 71);
}
</style>
